<#include "/oms/iframe/common/head_index.html" />
<link rel="stylesheet" href="${request.contextPath}/static/oms/iframe/plugins/treetable/css/jquery.treetable.theme.bootstrap.css" />
<link rel="stylesheet" href="${request.contextPath}/static/oms/default/plugins/treetable/css/jquery.treetable.css" type="text/css">
<@dictionary type="function" fields="Status,AccessLevel"></@dictionary>
<@dictionary type="listjson" fields="Status,AccessLevel"></@dictionary>

<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">记事本分类管理</h3>
				<div class="box-tools pull-right">
					<@shiro.hasPermission name="notepad:note:category:create">
						<a class="btn btn-sm btn-primary" target="modal" modal="lg" href="${request.contextPath}/notepad/note/category/add">添加</a>
					</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
				<div class="clearfix">
					<form id="search-form" class="" >
						<div class="col-md-2">
							<div class="input-group">
								<span class="input-group-addon"><i class="fa fa-user"></i></span>
								<input type="text" class="form-control" name="username" value="${username}" placeholder="根据用户名搜索...">
							</div>
						</div>
						<div class="col-sm-2">
							<div class="input-group ">
								<select type="text" class="form-control pull-right" id="parentId"  placeholder="" style="width: 100%">
								</select>
							</div>
						</div>
						<div class="col-sm-2">
							<button type="button" onclick="searchRefresh();" class="btn btn-primary">搜索</button>
						</div>
					</form>
				</div>
				<div class="clearfix" style="padding-top: 15px;">
					<table id="treeTable" class="table table-bordered">
						<thead>
							<tr>
								<th class="col-sm-3 pd-l-lg">
									<span class="pd-l-sm ml20"></span>名称
								</th>
								<th class="col-sm-2">记事数</th>
								<th class="col-sm-2">访问权限类型</th>
								<th class="col-sm-1">状态</th>
								<th class="col-sm-2">操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<#include "/oms/iframe/common/setting_index.html" />
<#include "/oms/iframe/common/bottom_index.html" />
<script type="text/javascript" src="${request.contextPath}/static/oms/default/plugins/treetable/jquery.treetable.js"></script>

<script type="text/javascript">
    var $searchForm=$("#search-form");
    var $username = $searchForm.find("[name='username']");
    $.ajax({
        type:"get",
        url:'/notepad/note/category/treeGrid',
        dataType:'json',
        data:{parentId:"",username:$username.val()}
    }).done(function(result){
        var o = [];
        var a = result;
        $.each(a, function() {
            if(this.id !== undefined && this.id !==''){
                o.push({'id':this.id,'text':this.name});
            }
        });
        var select2 = $("#parentId").select2({
            data:o,
            placeholder: "上级资源...",
            allowClear: true,
            language: "zh-CN",
            theme: "bootstrap"
        });
        select2.val('${parentId}').trigger("change");
    });

    var $ajax =$.ajax({
        type:"get",
        url:'/notepad/note/category/treeGrid',
        dataType:'json',
		data:{parentId:"${parentId}",username:"${username}"}
    });
	$ajax.done(function(result){
		var tbodyHtmlStr="";
		for(var i=0; i<result.length; i++){

			tbodyHtmlStr +=
				'<tr data-tt-id="'+result[i].id+'" data-tt-parent-id="'+result[i].parentId+'"  data-tt-branch="'+result[i].hasChildren+'">'
				+  '	<td>'
				+  '   		<i class="'+result[i].iconCls+'"></i> '+result[i].name
				+  '	</td>'
				+  '	<td>'+result[i].contentCount+'</td>'
				+  '	<td>'+getAccessLevelDictName(result[i].accessLevel)+'</td>'
				+  '	<td>'+getStatusDictName(result[i].status)+'</td>'
				+  '	<td>'
				+  '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/notepad/note/category/view?id='+ result[i].id + '" >'
				+  '			<i class="glyphicon glyphicon-edit"></i>'
				+  '		</a>  '
				+  '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/notepad/note/category/update?id='+ result[i].id + '" >'
				+  '			<i class="glyphicon glyphicon-edit"></i>'
				+  '		</a>  '
				+  '		<a class="btn btn-sm btn-danger" title="删除" callback="window.location.reload()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/notepad/note/category/delete?id='+ result[i].id + '">'
				+  '			<i class="glyphicon glyphicon-remove"></i>'
				+  '		</a>'
				+  '   </td>'
				+  '</tr>';
		}
		$('#treeTable').find('tbody').html(tbodyHtmlStr);
		var $treeTable= $("#treeTable").treetable({
			theme:'vsStyle',
			expandable: true,
			onNodeExpand : function(){
				var node = this;
				var rows = "<tr data-tt-id=\"loading\" data-tt-parent-id=\""+node.id+"\" data-tt-branch=\"false\"><td colspan='5'><img src=\"${request.contextPath}/static/oms/default/dist/img/common/loading.gif\"/>loading</td></tr>";
				$treeTable.treetable("loadBranch", node, rows);
				$.get("${request.contextPath}/notepad/note/category/treeGrid?parentId="+node.id,{}, function(result){

					rows="";
					for(var i=0; i<result.length; i++){

						rows +=
							'<tr data-tt-id="'+result[i].id+'" data-tt-parent-id="'+result[i].parentId+'"  data-tt-branch="'+result[i].hasChildren+'">'
							+  '	<td>'
							+  '   		<i class="'+result[i].iconCls+'"></i>'+result[i].name
							+  '	</td>'
							+  '	<td>'+result[i].contentCount+'</td>'
                            +  '	<td>'+getAccessLevelDictName(result[i].accessLevel)+'</td>'
							+  '	<td>'+getStatusDictName(result[i].status)+'</td>'
							+  '	<td>'
							+  '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/notepad/note/category/view?id='+ result[i].id + '" >'
							+  '			<i class="glyphicon glyphicon-edit"></i>'
							+  '		</a>  '
							+  '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/notepad/note/category/update?id='+ result[i].id + '" >'
							+  '			<i class="glyphicon glyphicon-edit"></i>'
							+  '		</a>  '
							+  '		<a class="btn btn-sm btn-danger" title="删除" callback="window.location.reload()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/notepad/note/category/delete?id='+ result[i].id + '">'
							+  '			<i class="glyphicon glyphicon-remove"></i>'
							+  '		</a>'
							+  '   </td>'
							+  '</tr>';
					}

					$treeTable.treetable("unloadBranch", node);
					$treeTable.treetable("loadBranch", node, rows);
				});
			}
		});
	});

    function searchRefresh(){
        var $searchForm=$("#search-form");
        var username = "";
        if($searchForm.find("[name='username']").val()){
            username = $searchForm.find("[name='username']").val();
        }
        var parentId = "";
        if($searchForm.find("#parentId").val()){
            parentId = $searchForm.find("#parentId").val();
		}
        window.location.href="${request.contextPath}/notepad/note/category/index?parentId="+parentId+"&username="+username;
    }
</script>